<template>
    <div class="mapdialog">
      <el-dialog
          title="提示"
          :visible.sync="mapSelectVisible"
          width="30%">
       <div>
         <div class="map-wrap">
           <div class="pick-left-wrap">
             <div class="select-list">
               <div v-for="(item,index) in tabList" :key="index" :class="['select-item',item.value==activeTab?'active':'']" @click="handleClick(item.value)">{{item.name}}</div>
             </div>
           </div>
           <div class="pick-wrap">
             <div class="button-wrap">
               <el-button type="danger" icon="el-icon-delete" circle @click="deleteClick"></el-button>
               <el-button style="float: right" type="primary" @click="dialoguploadVisible=true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
             </div>
             <div v-if="pickList&&pickList.length">
               <div :class="['pick-item',isSelect(item.id)]" v-for="item in pickList" :key="item.id" @click="selectClick(item)">
                 <el-image  :src="baseURL+item.filepath" lazy></el-image>
                 <div class="pick-info">
                   <div>
                     <span>{{item.filename}}</span>
                   </div>
                 </div>
                 <div class="hover">
                   <i class="icon el-icon-check"></i>
                 </div>
               </div>
             </div>

             <el-empty v-else description="什么都没有.."></el-empty>
           </div>
         </div>
         <el-pagination
             layout="prev, pager, next"
             :page-size="20"
             :current-page="pagenum"
             @current-change="pageChange"
             :total="total">
         </el-pagination>

         <!--      上传图片-->
         <el-dialog title="上传图片"   :visible.sync="dialoguploadVisible">
           <el-upload
               class="upload-demo"
               :action="baseURL+actionUrl"
               :headers="headers"
               :data="upData"
               :on-success="handleAvatarSuccess"
               :file-list="fileList"
               list-type="picture">
             <el-button size="small" type="primary">点击上传</el-button>
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>
           <div slot="footer" class="dialog-footer">
             <el-button @click="dialoguploadVisible = false">关 闭</el-button>
           </div>
         </el-dialog>
       </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="mapSelectVisible = false">取 消</el-button>
        <el-button type="primary" @click="mapClick">确 定</el-button>
       </span>
      </el-dialog>
    </div>
</template>

<script>
import {deleFile, getFile} from '@/request'
export default {
  name: "MapSelect",
  props:{
    multi:{
      type:Number,
      default:1
    }
  },
  data(){
    return {
      mapSelectVisible:false,
      activeTab:-1,
      multilength:this.multi,
      tabList:[
        {
          name:'全部',
          value:-1
        },
        {
          name:'轮播图',
          value:1
        },
        {
          name:'用户相关',
          value:2
        },
        {
          name:'任务',
          value:3
        },
        {
          name:'图标',
          value:5
        },
        {
          name:'其他',
          value:0
        }
      ],
      pickList:[],
      pagenum:1,
      total:0,
      selectPic:[],
      selectPicklist:[],
      dialoguploadVisible:false,
      headers: {  // 请求头部参数
        Authorization:this.$store.state.token.tokenn,
      },
      fileList:[]
    }
  },
  created() {
    this.getfile()
  },
  computed:{
    isSelect(){
      return function (item){
        return this.selectPic.indexOf(item)==-1?'':'select'
      }
    },
    actionUrl(){
      return this.activeTab==5?'/api/file/icon':'/api/file/upload'
    },
    upData(){
      return {group_type:this.activeTab==-1?0:this.activeTab}
    }
  },
  methods:{
    async getfile(){
      // if(this.pagenum*10>this.total)return;
      // this.pagenum++;
      let params={pagenum:this.pagenum,is_delete:0};
      if(this.activeTab!=-1)params['group_type']=this.activeTab
      let data=await getFile(params);
      if(data.code!=200)return this.$message.error(data.message);
      this.pickList=data.data.list;
      this.total=data.data.total;
    },
    handleClick(tag){
      this.pagenum=1
      this.activeTab=tag;
      this.selectPic=[]
      this.getfile()
    },
    selectClick(item){
      let start=this.selectPic.indexOf(item.id)
      if(start==-1){
        if(this.multilength<=this.selectPic.length){
          this.selectPic=[]
          this.selectPicklist=[]
        }
        this.selectPic.push(item.id);
        this.selectPicklist.push(item)
      }else{
        this.selectPic.splice(start,1);
        this.selectPicklist.splice(start,1)
      }
    },
    deleteClick(){
      if(!this.selectPic.length)return this.$message.error("请先选择!")
      this.$confirm('您将删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(this.selectPic)
        let data=await deleFile({ids:this.selectPic});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.getfile()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    pageChange(val){
      this.pagenum=val
      this.getfile()
    },
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.pagenum=1
        this.getfile()
      } else {
        this.$message.error(res.message)
      }
    },
    mapClick(){
      this.mapSelectVisible = false;
      this.$emit('mapselectEvent',this.selectPicklist)
    },
    showMapSelect(){
      this.selectPic=[]
      this.selectPicklist=[]
      this.mapSelectVisible = true;
    }
  }
}
</script>

<style lang="scss" >
.mapdialog{
  .el-dialog{
    margin-top: 5vh !important;
    min-width: 70%;
  }
}
.map-wrap{
  display: flex;
  max-height:60vh;
  background-color: #fff;
}
.pick-left-wrap{
  width: 150px;
  text-align: center;
.select-list{
.select-item{
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
&.active{
   color: #409EFF;
 }
&:hover{
   outline: 0;
   background-color: #ecf5ff;
 }
}
}
}
.pick-wrap{
//min-height: 800px;
  overflow: scroll;
  padding: 20px;
  flex: 1;
  border-left: 1px solid ghostwhite;
.button-wrap{
  margin-bottom: 20px;
}
}

.pick-item{
  display: inline-block;
  width: 138px;
  height: 180px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 15px;
  margin-right: 10px;
  background: #e1e1e1;
  position: relative;
  border: 1px solid gainsboro;
.el-image{
  width: 100%;
  height: 100%;
}
.pick-info{
  position: absolute;
  z-index: 1;
  font-size: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  background-color: rgba(0,0,0,.5);
}
&.select{
.hover{
  display: block;
}
}
.hover{
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 1;
  text-align: center;
.icon{
  font-size: 50px;
  color: #fff;
  margin-top: 45%;
}
}
}
</style>